<template>
  <div class="query-cond-panel">
    <div style="margin-bottom: 10px">
      <div class="tips">
        <slot>
          说明: 文本类型的指标在排序时遵循UCA+CLDR规则，即按照 <b>空格-标点-数字-字母-中文</b>的顺序;
          影响按 <b>表头排序</b> 功能和 <b>大于、大于等于、小于、小于等于</b> 的筛选
        </slot>
      </div>
      <div style="float: right">
        <el-button-group>
          <el-button type="primary" plain icon="el-icon-plus" size="mini"
                     @click="addCond">添加
          </el-button>
          <el-button type="danger" plain icon="el-icon-delete" size="mini"
                     @click="condList=[]">清空
          </el-button>
        </el-button-group>
      </div>
    </div>
    <div style="clear: both;"></div>
    <el-form ref="condForm" :inline="true" label-width="85px" size="small" style="margin-top: 15px">
      <div class="tips" v-if="condList.length===0"></div>
      <div v-for="(cond,idx) in condList" :style="{paddingLeft: cond.tab?'35px':'5px'}">
        <el-form-item label="查询指标">
          <el-select v-model="cond.field" clearable filterable @change="setCondInfo(cond)"
                     placeholder="请选择要查询的指标" style="width: 180px">
            <el-option
              v-for="item in itemList"
              :key="item.id"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询操作">
          <el-select v-model="cond.operation" placeholder="操作" style="width: 120px">
            <el-option label="开头是" value="beginWith" v-if="isNormalEnable(cond)"></el-option>
            <el-option label="结尾是" value="endWith" v-if="isNormalEnable(cond)"></el-option>
            <el-option label="包含" value="like" v-if="isNormalEnable(cond)"></el-option>
            <el-option value="=" label="等于"></el-option>
            <el-option value="!=" label="不等于"></el-option>
            <el-option value=">" label="大于" v-if="isNormalEnable(cond)||isNumberEnable(cond)"></el-option>
            <el-option value=">=" label="大于等于" v-if="isNormalEnable(cond)||isNumberEnable(cond)"></el-option>
            <el-option value="<" label="小于" v-if="isNormalEnable(cond)||isNumberEnable(cond)"></el-option>
            <el-option value="<=" label="小于等于" v-if="isNormalEnable(cond)||isNumberEnable(cond)"></el-option>
            <!--<el-option value="isNotNull" label="非空"></el-option>-->
            <!--<el-option value="isNull" label="为空"></el-option>-->
            <el-option value="isNotBlank" label="非空"></el-option>
            <el-option value="isBlank" label="为空"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询数值">
          <el-select v-if="isGroupEnable(cond)" v-model="cond.value" clearable filterable placeholder="请选择值" style="width: 180px">
            <el-option
              v-for="opt in groupMap[cond.field]"
              :key="opt.code"
              :label="opt.name"
              :value="opt.code">
            </el-option>
          </el-select>
          <el-input v-else v-model="cond.value" placeholder="查询值" style="width: 160px"></el-input>
        </el-form-item>
        <el-form-item label="关系" style="margin-left: -30px">
          <el-select v-model="cond.logic" placeholder="操作" style="width: 80px">
            <el-option label="与" value="and"></el-option>
            <el-option label="或" value="or"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" plain icon="el-icon-plus" size="mini"
                       @click="addCond(idx)"></el-button>
            <el-button type="danger" plain icon="el-icon-minus" size="mini"
                       @click="condList.splice(idx,1)"></el-button>

            <!--缩进-->
            <el-button type="primary" plain size="mini" icon="el-icon-back" v-if="cond.tab" @click="cond.tab=!cond.tab">
            </el-button>
            <el-button type="primary" plain size="mini" icon="el-icon-right" v-else @click="cond.tab=!cond.tab">
            </el-button>
          </el-button-group>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ItemCondition",
  props: {
    //数组,每个对象属性为 name,code,options
    itemList: {
      type: Array,
      required: true
    },
    //分组项, key: 指标名,value: [{name,code}]
    groupMap: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      condList: []
    }
  },
  methods: {
    //设置条件信息
    setCondInfo(cond) {
      //清空值
      cond.value = '';
      //设置类型信息
      let field = cond.field;
      if (field) {
        let filter = this.itemList.filter(item => item.code == field);
        if (filter.length > 0) {
          cond.type = filter[0].type;
          cond.sortRule = filter[0].sortRule;
        } else {
          cond.type = 1;
          cond.sortRule = 0;
        }
      } else {
        cond.type = 1;
        cond.sortRule = 0;
      }
    },
    //添加条件
    addCond(index) {
      let cond = {
        field: '',
        operation: '',
        value: '',
        logic: 'and',
        //缩进
        tab: false,
        //类型,1普通字符,2分组,3数字
        type: 1,
        //排序规则
        sortRule: 0
      };
      if (typeof index == 'number') {
        this.condList.splice(index, 0, cond)
      } else {
        this.condList.push(cond)
      }
    },
    //是否分组类型
    isGroupEnable(cond) {
      return cond.type == 2 && (!!this.groupMap[cond.field]) && this.groupMap[cond.field].length > 0;
    },
    //是否字符
    isNormalEnable(cond) {
      return cond.type == 1 || (cond.type == 2 && !this.isGroupEnable(cond));
    },
    //是否数字
    isNumberEnable(cond) {
      return cond.type == 3;
    },
    //获取列表
    getCondList() {
      return this.condList;
    },
    //设置条件列表
    setCondList(condList) {
      this.condList = condList || [];
    },
    //清除条件
    clearCondList() {
      this.condList = [];
    }
  }
}
</script>

<style scoped>
.query-cond-panel {
  padding: 8px 8px 0;
  border: 1px solid #409EFF;
  border-radius: 15px;
  margin-bottom: 15px;
  margin-top: -12px;
  min-height: 55px;
}

.query-cond-panel .el-form-item {
  margin-bottom: 8px;
}

.query-cond-panel .tips {
  color: #409EFF;
  margin-top: 10px;
  text-align: center;
  float: left;
  margin-left: 20px
}

.query-cond-panel .tips b {
  font-style: italic;
}
</style>
